import { useState } from 'react';
import { getData5 } from '../Data'
import { useMount, useReactive } from 'ahooks';
import { Input } from "antd";
import { FlexGrid } from '@grapecity/wijmo.react.grid';

const WijmoK01 = () => {

    const InitData = useReactive({})

    const [Data, setData] = useState()
    useMount(() => { setData(getData5(100)) })

    const init = (init) => {
        InitData.init = init
    }
    const filter = (e) => {
        let filter = e.target.value.toLowerCase()
        InitData.init.collectionView.filter = item => { return (filter.length == 0 || item.country.toLowerCase().indexOf(filter) > -1) }
    }

    if (Data) {
        return (
            <div className="Page">
                <div className="Label">
                    <label htmlFor="">搜索 Country : </label>
                    <Input placeholder="请输入要搜索的Country内容" onChange={filter} />
                </div>
                <FlexGrid initialized={init} itemsSource={Data} />
            </div>
        )
    }
};

export default WijmoK01